<template>
	<view class="content">
		<view class="login_img">
			<image mode="aspectFill"
				src="http://eb118-file.cdn.bcebos.com/upload/FF26C9C88039D4483161A4E106191A4C?x-bce-process=style/wm_ai">
			</image>
		</view>

		<view class="login_from">
			<view class="login_from_input">
				<view class="login_from_name">账号</view>
				<view class="login_from_fun"><input v-model="account" type="text" placeholder="请输入账号(3~16)" /></view>
			</view>

			<view class="login_from_input">
				<view class="login_from_name">密码</view>
				<view style="padding-left: 500rpx; position: absolute; width: 50%;">
					<u-icon v-if="!showPassword" name="eye" @click="togglePasswordVisibility"></u-icon>
					<u-icon v-if="showPassword" name="eye-fill" @click="togglePasswordVisibility"></u-icon>
				</view>

				<view class="login_from_fun"><input v-model="password" :type="showPassword ? 'text' : 'password'"
						placeholder="请输入密码(8~16)" /></view>
			</view>
			<view class="login_from_input">
				<view class="login_from_name">确认密码</view>

				<view class="login_from_fun"><input v-model="checkPassword" :type="showPassword ? 'text' : 'password'"
						placeholder="请输入确认密码(8~16)" /></view>
			</view>
			<view class="goto" @click="goto">已有账号？前往登录</view>

			<view class="login_from_dl"><button @click="register">注册</button></view>

			<view class="logo_xieyi">
				<label @click="moutcl" :class="gouxSta ? 'cuIcon-squarecheckfill' : 'cuIcon-square'"></label>
				<view class="logo_text">
					请勾选并阅读
					<text @click="registrationAgreement">《注册协议》</text>
					及
					<text @click="privacyAgreement">《隐私协议》</text>
				</view>
			</view>
		</view>
		<view>
			<u-toast ref="uToast"></u-toast>
			<u-cell-group title-bg-color="rgb(243, 244, 246)">
				<u-cell :titleStyle="{ fontWeight: 500 }" :title="item.title" v-for="(item, index) in list" :key="index"
					isLink :icon="item.iconUrl" @click="showToast(item)"></u-cell>
			</u-cell-group>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				gouxSta: false,
				account: '',
				password: '',
				showPassword: false,
				checkPassword: '',
				show: false,
				paramSuccess: {
					type: 'success',
					message: '注册成功',
					duration: '1000',
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
				},
				paramLoading: {
					type: 'loading',
					message: '正在注册',
					duration: '1000',
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/loading.png'
				},
				paramError: {
					type: 'error',
					icon: false,
					message: '注册失败',
					duration: '1000',
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
				}
			};
		},
		onLoad() {},
		methods: {
			togglePasswordVisibility() {
				this.showPassword = !this.showPassword; // 切换密码可见性
			},
			privacyAgreement() {
				uni.navigateTo({
					url: '/pages/privacy_agreement/privacy_agreement'
				})
			},
			registrationAgreement() {
				uni.navigateTo({
					url: '/pages/registration_agreement/registration_agreement'
				})
			},
			goto() {
				uni.navigateTo({
					url: '../login/login'
				});
			},
			showToast(params) {
				this.$refs.uToast.show({
					...params
					// complete() {
					// 	params.url &&
					// 		uni.navigateTo({
					// 			url: params.url
					// 		});
					// }
				});
			},
			moutcl() {
				if (this.gouxSta == false) {
					this.gouxSta = true;
				} else {
					this.gouxSta = false;
				}
			},

			register() {
				let that = this;
				if (this.gouxSta == false) {
					uni.showToast({
						title: '请阅读并勾选用户协议',
						icon: 'none'
					});
					return;
				}
				let data = {
					account: that.account,
					password: that.password,
					checkPassword: that.checkPassword
				};
				that.$ajax(that.$url.register, 'POST', data, function(resp) {
					if (resp.data.code == '200') {
						that.showToast(that.paramSuccess);
						setTimeout(() => {
							uni.navigateTo({
								url: '../login/login'
							});
						}, 1200);
					} else {
						that.showToast(that.paramError);
					}
				});
			}
		}
	};
</script>
<style>
	page {
		background: #fff;
		font-family: arial, verdana, helvetica, 'PingFang SC', 'HanHei SC', STHeitiSC-Light, Microsoft Yahei, sans-serif;
	}

	.goto {
		position: absolute;
		color: forestgreen;
		font-size: 25rpx;
		border-bottom: 1px solid #007aff;
		/* 添加水平线，1像素宽，颜色为灰色 */
		margin-top: 30rpx;
		margin-left: 400rpx;
	}

	.login_img {
		width: 100%;
		height: auto;
		margin-top: 90upx;
	}

	.login_img image {
		width: 200upx;
		height: 200upx;
		display: block;
		margin: 0px auto;
		border-radius: 50%;
	}

	.login_from {
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding: 40upx 8%;
		margin-top: 80upx;
	}

	.login_from_input {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px #eee solid;
		padding: 50upx 0px;
		margin: 0px auto;
	}

	.login_from_name {
		width: 20%;
	}

	.login_from_fun {
		width: 72%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}

	.login_from_fun input {
		padding-right: 160rpx;
		width: 100%;
		text-align: left;
		font-size: 14px;
	}

	.login_from_dl {
		width: 100%;
		height: 50px;
		line-height: 50px;
		margin-top: 120upx;
	}

	.login_from_dl button {
		width: 100%;
		height: 50px;
		line-height: 50px;
		background: #007aff;
		color: #fff;
		border-radius: 0px;
	}

	.logo_xieyi {
		width: 100%;
		height: 40px;
		line-height: 40px;
		display: flex;
		flex-direction: row;
		margin-top: 30upx;
		align-items: center;
		color: #444;
		font-size: 14px;
		justify-content: center;
	}

	.logo_xieyi label {
		font-size: 18px;
		margin-right: 1%;
		display: block;
		width: 15px;
		height: 15px;
	}

	.cuIcon-squarecheckfill {
		color: #007aff;
	}

	.logo_text text {
		color: #007aff;
	}

	.cuIcon-squarecheckfill {
		background: #007aff;
		position: relative;
		border: 2px #ccc solid;
		box-sizing: border-box;
		border-radius: 3px;
	}

	.cuIcon-square {
		background: #fff;
		border: 2px #ccc solid;
		box-sizing: border-box;
		border-radius: 3px;
	}
</style>